<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
<f:view>
	<h:form id='purchase_order_form'>
		<h:head>
			<script type="text/javascript"
				src="${facesContext.externalContext.requestContextPath}/resources/script/jquery.js"></script>

			<script type="text/javascript"
				src="../../resources/script/jquery.dataTables.js"></script>
			<script
				src="${facesContext.externalContext.requestContextPath}/resources/script/ui/jquery-ui-1.9.0.custom.js"></script>
			
			<script type="text/javascript"
				src="${facesContext.externalContext.requestContextPath}/views/management/scripts/purchase_order.js"></script>
			<script type="text/javascript"
				src="${facesContext.externalContext.requestContextPath}/views/scripts/global.js"></script>
			
			<style type="text/css" title="currentStyle">
				@import "../../resources/css/datatable_page.css";
				@import "../../resources/css/datatable_table.css";
				@import "${facesContext.externalContext.requestContextPath}/views/management/css/purchase_order.css";
				@import "${facesContext.externalContext.requestContextPath}/views/css/tabs.css";
				@import "${facesContext.externalContext.requestContextPath}/resources/css/header.css";
				@import "${facesContext.externalContext.requestContextPath}/views/css/global.css";
				@import "${facesContext.externalContext.requestContextPath}/views/css/theme.css";
				@import "${facesContext.externalContext.requestContextPath}/resources/css/themes/base/jquery.ui.all.css";
			</style>
			<script type="text/javascript"
				src="${facesContext.externalContext.requestContextPath}/views/scripts/global.js"></script>
			
			

			<script type="text/javascript" charset="utf-8">
			//<![CDATA[
			    
				$(function() {
					checkAttributes();
					
					//$("[id='purchase_order_form:transaction_date']").datepicker();
					
					linesTable = $('#po_lines_table').dataTable();
					stocksTable = $('#stocks_table').dataTable();
					$( "#tabs" ).tabs({
						beforeLoad: function( event, ui ) {
							ui.jqXHR.error(function() {
								ui.panel.html(
									"Couldn't load this tab. We'll try to fix this as soon as possible. " +
									"If this wouldn't be a demo." );
							});
						},
					beforeActivate: function(event, ui)
					{
					}
					});
					
					thumbnailDisplay();
					
				});
				//]]>
			</script>

		</h:head>
		<body>
			<div>
				<ui:include src="../../views/header/header.xhtml" />
				<br /> <br /> <br />
			</div>
			<div>
			<h2>Purchase Order</h2>
			
			<div id="function_div">
				<h:commandButton class="hidden_input" value="Load Po" action="#{purchaseOrderBean.loadItemsAction}">
				</h:commandButton>
				
				<button onclick="return validateLines()" class="hidden_input">Test</button>
				
				
				
				<h:commandButton id="save_btn" value="Save" action="#{purchaseOrderBean.savePurchaseOrderAction}" 
					onclick="return saveBtnOnclick()"></h:commandButton>
				<h:commandButton id="complete_btn" value="Complete" action="#{purchaseOrderBean.completePurchaseOrderAction}" 
					onclick="return validateLines()"></h:commandButton>
				<h:commandButton id="cancel_btn" value="Cancel" action="#{purchaseOrderBean.cancelPurchaseOrderAction}" 
					onclick="return validateLines()"></h:commandButton>
				<h:commandButton id="finalise_btn" value="Finalise" action="#{purchaseOrderBean.finalisePurchaseOrderAction}" 
					onclick="return validateLines()"></h:commandButton>
			</div>
			
			<div id="hidden_area" class="hidden_input">
				<h:inputText id="item_code_string" value="#{purchaseOrderBean.itemCodesString}"></h:inputText>
				<h:inputText id="store_code_string" value="#{purchaseOrderBean.storeCodeString}"></h:inputText>
			</div>
			</div>
			<div id="tabs" >
				<ul>
					<li><a href="#tabs-1">Purchase Order</a></li>
					<li >
					 <a href="#tabs-2">Items</a>
					</li>
					<li class="hidden_input">
					 <a href="#stocks_tab">Stocks</a>
					</li>
				</ul>
				<div id="tabs-1">
					<div>
						<table>
							<tr>
								<td>
									<h:commandButton id="po_number_btn" value="PO Number" action="#{purchaseOrderBean.openPurchaseOrderAction}">
									</h:commandButton>
								</td>
								<td>
									<h:inputText id="po_number" value="#{purchaseOrderBean.poNumber}"></h:inputText>
									<h:inputText class="hidden_input" value="#{purchaseOrderBean.poNumber}"></h:inputText>
								</td>
								<td>
									<h:commandButton id="transaction_code_btn" value="Transaction Code" action="#{purchaseOrderBean.openTransactionReferenceAction}">
									</h:commandButton>
								</td>
								<td>
									<h:inputText id="transaction_code" value="#{purchaseOrderBean.transactionCode}"></h:inputText>
									<h:inputText class="hidden_input"  value="#{purchaseOrderBean.transactionCode}"></h:inputText>
								</td>
							</tr>
							<tr>
								<td>
									<h:commandButton id="officer_code_btn" value="Officer Code" action="#{purchaseOrderBean.openUserAction}">
									</h:commandButton>
								</td>
								<td>
									<h:inputText id="officer_code" value="#{purchaseOrderBean.officerCode}"></h:inputText>
									<h:inputText class="hidden_input"  value="#{purchaseOrderBean.officerCode}"></h:inputText>
								</td>
								<td>
									<h:commandButton id="store_code_btn" value="Store Code" action="#{purchaseOrderBean.openStoreAction}">
									</h:commandButton>
								</td>
								<td>
									<h:inputText id="store_code" value="#{purchaseOrderBean.storeCode}"></h:inputText>
									<h:inputText class="hidden_input"  value="#{purchaseOrderBean.storeCode}"></h:inputText>
								</td>
							</tr>
							
							<tr>
								<td>
									<h:outputLabel value="Transaction Date">
									</h:outputLabel>
								</td>
								<td>
									<h:inputText id="transaction_date" value="#{purchaseOrderBean.transactionDate}"></h:inputText>
									<h:inputText class="hidden_input"  value="#{purchaseOrderBean.transactionDate}"></h:inputText>
								</td>
								<td>
									<h:outputLabel value="Postage">
									</h:outputLabel>
								</td>
								<td>
									<h:inputText id="postage_hidden" class="hidden_input" value="#{purchaseOrderBean.postage}"></h:inputText>
									<h:inputText id="postage" value="#{purchaseOrderBean.postage}"></h:inputText>
								</td>
							</tr>
							
							<tr>
								<td>
									<h:outputLabel value="Status">
									</h:outputLabel>
								</td>
								<td>
									<h:inputText id="status" value="#{purchaseOrderBean.status}"></h:inputText>
									<h:inputText class="hidden_input" value="#{purchaseOrderBean.status}"></h:inputText>
								</td>
								<td>
									<h:outputLabel value="Buyer">
									</h:outputLabel>
								</td>
								<td>
									<h:inputText id="buyer_hidden" class="hidden_input" value="#{purchaseOrderBean.buyer}"></h:inputText>
									<h:inputText id="buyer" value="#{purchaseOrderBean.buyer}"></h:inputText>
								</td>
							</tr>
							
							<tr>
								<td>
									<h:outputLabel value="Delivery Address">
									</h:outputLabel>
								</td>
								<td>
									<h:inputTextarea id="delivery_address_hidden" class="hidden_input" value="#{purchaseOrderBean.deliveryAddress}">
									</h:inputTextarea>
									<h:inputTextarea id="delivery_address" value="#{purchaseOrderBean.deliveryAddress}">
									</h:inputTextarea>
								</td>
								<td>
									<h:outputLabel value="Comments">
									</h:outputLabel>
								</td>
								<td>
									<h:inputTextarea id="comments" value="#{purchaseOrderBean.comments}"></h:inputTextarea>
								</td>
							</tr>
							
						</table>
						
					</div>
				</div>
				
				<div id="tabs-2">
					<div>
						<div>
							<h:commandButton id="item_code_btn" value="Add Items" action="#{purchaseOrderBean.openStocksAction}" >
							</h:commandButton>
						</div>
						<table class="display" id="po_lines_table">
							<thead>
								<tr>
									<th><h:outputText value="Item Code" /></th>
									<th><h:outputText value="Icon" /></th>
									<th><h:outputText value="Price" /></th>
									<th><h:outputText value="Quantity" /></th>
									<th><h:outputText value="#{msg.delete}" /></th>
								</tr>
							</thead>
							<tbody id="po_lines_table_body">
							<ui:repeat var="po_line" value="#{purchaseOrderBean.attachedPurchaseLines}">
								<tr>
									<td><h:inputText class="item_code_column" value="#{po_line.itemCode}" /></td>
									<td >
										<img class="thumbnail" width="42" height="42" src="/shop/upload/icons/#{po_line.itemCode}.jpg"/>
									</td>
									<td><h:inputText class="price_column" value="#{po_line.price}" /></td>
									<td><h:inputText class="qty_column" value="#{po_line.quantity}" /></td>
									<td>
									<h:commandButton class="delete_column" value="#{msg.delete}" action="#{purchaseOrderBean.removePurchaseLineAction(po_line.itemCode)}">
									</h:commandButton>
									</td>
								</tr>
							</ui:repeat>
		
							</tbody>
		
							<tfoot>
								<tr>
									<th><h:outputText value="Item Code" /></th>
									<th><h:outputText value="Icon" /></th>
									<th><h:outputText value="Price" /></th>
									<th><h:outputText value="Quantity" /></th>
									<th><h:outputText value="#{msg.delete}" /></th>
								</tr>
							</tfoot>
						
						</table>		
				
					</div>
					<div>
					
					 
						
					</div>
				</div>
				
				<div id="stocks_tab" >
					<div class="hidden_input">
						<table id="stocks_table" class="display">
							<thead>
							<tr>
								<td>Item Code</td>
								<td>Icon</td>
								<td>Store Code</td>
								<td>Qty</td>
								<td>Hold Qty</td>
							</tr>
							</thead>
							<tbody id="stocks_table_body">
								<ui:repeat value="#{stockService.allStocks}" var="stock">
								<tr>
								<td>
									<h:inputText disabled="true" value="#{stock.id.itemCode}"></h:inputText>
								</td>
								<td>
									<img class="thumbnail" width="42" height="42" src="/shop/upload/icons/#{stock.id.itemCode}.jpg"/>
								</td>
								<td>
									<h:inputText  disabled="true" value="#{stock.id.storeCode}"></h:inputText>
								</td>
								<td>
									<h:inputText  disabled="true" value="#{stock.quantity}"></h:inputText>
								</td>
								<td>
									<h:inputText  disabled="true" value="#{stock.holdQty}"></h:inputText>
								</td>
								</tr>
								</ui:repeat>
							</tbody>
							<tfoot>
							<tr>
								<td>Item Code</td>
								<td>Icon</td>
								<td>Store Code</td>
								<td>Qty</td>
								<td>Hold Qty</td>
							</tr>
							</tfoot>					
						</table>
					</div>
				</div>
			</div>

			<ui:include src="../../views/footer/footer.xhtml" />
		</body>


	</h:form>
</f:view>
</html>
